<template>
  <div v-if="main.isPhoneModel">
    <van-overlay :show="main.showService" :lock-scroll="false" z-index="100">
      <div class="wrapper" @click.stop>
        <div class="bg-[#213744] text-white rounded-lg max-w-[413px] w-full">
          <div
            class="fle justify-center items-center relative p-4 border-b border-gray-700"
          >
            <p class="text-lg text-center">
              {{ $t("page.navbar.customerService") }}
            </p>
            <button
              class="text-gray-400 hover:text-gray-200 absolute right-4 top-5"
            >
              <van-icon
                @click="closeLayer"
                class="cursor-pointer"
                name="cross"
              />
            </button>
          </div>

          <div class="h-[400px] max-h-[600px]">
            <iframe
              :src="main.customerService"
              frameborder="0"
              style="width: 100%; height: 100%"
              sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms allow-popups"
            ></iframe>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
  <div v-else>
    <div
      v-if="main.showService"
      class="bg-[#213744] rounded-lg fixed text-[#fff] top-20 w-[300px] h-[400px] right-10 service"
    >
      <div
        class="fle justify-center items-center relative p-4 border-b border-gray-700"
      >
        <p class="text-lg text-center">
          {{ $t("page.navbar.customerService") }}
        </p>
        <button
          class="text-gray-400 hover:text-gray-200 absolute right-4 top-5"
        >
          <van-icon @click="closeLayer" class="cursor-pointer" name="cross" />
        </button>
      </div>
      <div class="h-[400px] max-h-[600px]">
        <iframe
          :src="main.customerService"
          frameborder="0"
          style="width: 100%; height: 100%"
          sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms allow-popups"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  getCurrentInstance
} from "vue";
import { useRouter } from "vue-router";
import { activeSignview, activeSign } from "../../api/active.js";
import { mainAct } from "@/store/activeda";
import { mainWallet } from "@/store/wallet";
import coins1 from "../../assets/checkin/j.png";
import coins2 from "../../assets/checkin/j2.png";
import coins3 from "../../assets/checkin/j3.png";
import bg1 from "../../assets/checkin/d2.png";
import bg2 from "../../assets/checkin/d3.png";
import countdownTimer from "./countdown-timer.vue";
const main = mainAct();

const emit = defineEmits(["openWallet"]);
const goToWallet = () => {
  main.checkActLayer = false;
};
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const closeLayer = () => {
  main.showService = false;
};

onMounted(() => {});
</script>
<style scoped lang="less">
@media (min-width: 600px) {
}
.layer {
  // width: 375px;
  /*width: 100%;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tab-active {
  background-color: #2f4553;
  color: #fff;
}
.tab-inactive {
  color: #fff;
}

.service {
  z-index: 99999;
}
</style>
